<#assign pageTitle="素材_${siteCompany.siteName!}"/>
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/filter.css"/>
</#assign>
<#assign pageContent>
    <div class="filter-box">
        <div class="fl">
            <span :class="[orderBy == 3?'item active':'item']" @click="clickOrderBy(3)">综合</span>
            <span class="division">|</span>
            <span :class="[orderBy == 1?'item active':'item']"  @click="clickOrderBy(1)">热门</span>
            <span class="division">|</span>
            <span :class="[orderBy == 2?'item active':'item']"  @click="clickOrderBy(2)">下载</span>
        </div>
        <div @click="clickFilter" class="filter-btn">
            <van-icon name="apps-o" size="18"></van-icon> {{categoryName}}
        </div>
    </div>
    <div style="height: 60px"></div>
    <van-pull-refresh v-model="dtRefreshing" @refresh="onRefreshDt" class="main-item">
        <van-list
                v-model="dtLoading"
                :finished="dtFinished"
                :error.sync="error"
                finished-text="没有更多了"
                error-text="请求失败，点击重新加载"
                @load="onLoadDt"
        >
            <div class="picture-list">
                <a class="picture-item"  v-for="(item,index) in dtList" :key="index"  :href="'/picture/view/'+ item.id +'.html'">
                   <div class="picture-img"> <img :src="item.imgUrl"  alt=""></div>
                    <div class="picture-name text-one">{{item.title}}</div>
                </a>
            </div>
        </van-list>
        <van-empty description="小编还没有整理内容哦，去看看其它吧" v-if="emptyDoc"/>
    </van-pull-refresh>
    <div class="nav-more-list" v-if="showCategory">
        <van-row  gutter="20">
            <van-col span="8" v-for="(item,index) in categoryList" :key="index">
                <a :href="'/picture/index.html?categoryId=' + item.categoryId "  :class="categoryId==item.categoryId?'active':''">{{item.categoryName}}</a>
            </van-col>
        </van-row>
        <div class="mav-ml-bottom" @click="closeCategory"><van-icon name="arrow-up" ></van-icon></div>
    </div>
</#assign>
<#assign pageScript>
    <script>
        var  subjectId  = 0 //专业id
            , categoryId  = ${categoryId} // 分类id
            , elite = 0 //是否推荐
            ,  isFree = 0
            , orderBy = 3 ;//排序;//是否收费
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: true,
                    activeTab:4,
                    subjectId : subjectId,
                    categoryId: categoryId,
                    orderBy: orderBy,
                    elite: elite,
                    isFree: isFree,
                    dtList: [],//加载所有内容
                    dtLoading: false,
                    dtFinished: false,
                    dtRefreshing: false,
                    dtPage: 0,
                    error: false,
                    limit: 5,
                    showList: false,
                    emptyDoc: false,
                    checked:false,
                    showCategory:false,
                    categoryList:[],
                    categoryName:'筛选',
                }
            },
            created(){
                let _self = this;
                _self.initCategory();
            },
            methods: {
                onLoadDt() {
                    var _self = this;
                    if (_self.dtRefreshing) {
                        _self.dtList = [];
                        _self.dtRefreshing = false;
                    }
                    _self.dtPage = _self.dtPage + 1;
                    _self.dtLoading = true;
                    axios.get('/ajax/picture/list.json', {
                        params: {
                            page: _self.dtPage,
                            limit: _self.limit,
                            subjectId : _self.subjectId,
                            categoryId: _self.categoryId,
                            orderBy: _self.orderBy,
                            elite: _self.elite,
                            isFree: _self.isFree,
                        }
                    }).then(function (response) {
                        if (response.data.code === 0) {
                            _self.dtList = _self.dtList.concat(response.data.data);
                            if (response.data.data.length < _self.limit) {
                                _self.dtFinished = true;
                            }
                            if (response.data.data.length === 0 && _self.dtPage < 2) {//初始未请求到数据
                                _self.emptyDoc = true;
                                return
                            }
                        } else {
                            _self.error = true;
                            console.log(response.data.msg);
                        }
                        _self.dtLoading = false;
                    }).catch(function (error) {
                        _self.error = true;
                        _self.dtLoading = false;
                        console.log(error);
                    });
                },
                clickOrderBy(orderBy){
                    var _self = this;
                    _self.dtPage = 0;
                    _self.orderBy = orderBy;
                    _self.dtList = [];
                    _self.onLoadDt();
                },
                onRefreshDt() {
                    // 重新加载数据
                    let _self = this;
                    _self.dtRefreshing = true;
                    _self.dtPage = 0;
                    _self.dtList = [];
                    _self.onLoadDt();
                },
                clickFilter() {
                    let _self = this;
                    _self.showCategory = !_self.showCategory;
                },
                initCategory(){
                    let _self = this;
                    if(_self.categoryList.length  == 0){
                        axios.get('/ajax/category/list.json', {
                            params: {
                                channelId: 10
                            }
                        }).then(function (response) {
                            if (response.data.code === 0) {
                                _self.categoryList.push({categoryId: 0, categoryName: '全部'});
                                _self.categoryList =  _self.categoryList.concat(response.data.data);
                                _self.categoryName =  _self.categoryList.find(item => item.categoryId=== _self.categoryId).categoryName;
                            } else {
                                _self.$toast.error(response.data.msg);
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                    }
                },
                closeCategory(){
                  this.showCategory = false
                }
            },
        })
    </script>
</#assign>
<#include "../layout_h5.ftl" />